<template>
	<div class="root">
		<img class="backimg" src="http://qncdn.tissys.com/img/bj2020100701.jpg" alt="">
		<div class="container_one" v-if="liveInfo[0]">
			<div class="container">
				<div class="title" v-if="liveInfo[0].com_name.length<=10">{{liveInfo[0].com_name}}</div>
				<marquee class="title" v-if="liveInfo[0].com_name.length>10">{{liveInfo[0].com_name}}</marquee>
				<div class="match_info">{{liveInfo[0].ground_name}} {{liveInfo[0].group_name}} <span v-if="liveInfo[0].stage!==null">第{{liveInfo[0].stage}}轮</span> <span v-if="liveInfo[0].com_system!==2&&liveInfo[0].com_system!==3"><span v-if="stage==1">第一阶段</span><span v-if="stage==2">第一阶段</span></span></div>
				<div class="logo1">
					<img :src="liveInfo[0].com_logo" alt="">
				</div>
				<div class="logo2" v-if="liveInfo[0].com_logo_two">
					<img :src="liveInfo[0].com_logo_two" alt="">
				</div>
				<div class="box1" v-if="liveInfo[0].clash_info.one_limit_a!=null&&liveInfo[0].clash_info.team_name_a==null&&liveInfo[0].clash_info.team_name_b==null">
					<div class="groupname1" v-if="liveInfo[0].clash_info.one_limit_a.length<=9">{{liveInfo[0].clash_info.one_limit_a}}</div>
					<div class="groupname3" v-if="liveInfo[0].clash_info.one_limit_a.length>9"><span class="scroll">{{liveInfo[0].clash_info.one_limit_a}}</span></div>
					<div class="groupname2" v-if="liveInfo[0].clash_info.one_limit_b.length<=9">{{liveInfo[0].clash_info.one_limit_b}}</div>
					<div class="groupname4" v-if="liveInfo[0].clash_info.one_limit_a.length>9"><span class="scroll">{{liveInfo[0].clash_info.one_limit_b}}</span></div>
				</div>
				<div class="box1" v-if="liveInfo[0].clash_info.team_name_a!=null&&liveInfo[0].clash_info.team_name_b!=null">
					<div class="groupname1" v-if="liveInfo[0].clash_info.team_name_a.length<9">{{liveInfo[0].clash_info.team_name_a}}</div>
					<div class="groupname3" v-if="liveInfo[0].clash_info.team_name_a.length>=9"><span class="scroll">{{liveInfo[0].clash_info.team_name_a}}</span></div>
					<div class="groupname2" v-if="liveInfo[0].clash_info.team_name_b.length<9">{{liveInfo[0].clash_info.team_name_b}}</div>
					<div class="groupname4" v-if="liveInfo[0].clash_info.team_name_b.length>=9"><span class="scroll">{{liveInfo[0].clash_info.team_name_b}}</span></div>
				</div>
				<div :class="liveInfo[0].status==0||liveInfo[0].status==1?'waiting':liveInfo[0].status==2?'status1':liveInfo[0].status==3?'over':liveInfo[0].status==4?'pause':''" >
					<div class="ing"></div><span></span>
					<span class="status_name" v-if="liveInfo[0].status==0||liveInfo[0].status==1">即将开始</span>
					<span class="status_name" v-if="liveInfo[0].status==2">进行中</span>
					<span class="status_name" v-if="liveInfo[0].status==3">已结束</span>
					<span class="status_name" v-if="liveInfo[0].status==4">比赛暂停</span>
				</div>
				<div class="time">
					<div ><img src="http://qncdn.tissys.com/admin/assets/image/time.png" alt=""><span>{{liveInfo[0].game_time.split(':')[0]}}:{{liveInfo[0].game_time.split(':')[1]}}</span></div>
				</div>
				<div class="row1">
					<!-- 单打时上面运动员姓名 -->
					<div class="box name-single" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.name_a.length<=4">
						<span class="name_a"><span class="circle" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.user_id_a==liveInfo[0].clash_info.serve_user"></span>{{liveInfo[0].clash_info.name_a}}</span>
					</div>
					<!-- 单打名字超长处理 -->
					<div class="box name-single" id="overwidth" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.name_a.length>4">
						<div class="name_a">
							<span class="circle" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.user_id_a==liveInfo[0].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[0].clash_info.name_a}}</span></span>
						</div>
					</div>
					<!-- 双打时上面运动员姓名 v-if="matchType=='double'"-->
					<div class="box name-double" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==2">
						<!--  v-if="matchType == 'double'&&user_id_a==serve_user" {{name_a}} -->
						<div class="name_a" :id="liveInfo[0].clash_info.name_a.split('/')[0].length>=4?'overwidth1':''">
						<span class="circle" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==2&&liveInfo[0].clash_info.user_id_b==liveInfo[0].clash_info.serve_user"></span>
						<span class="name"><span class="scroll" >{{liveInfo[0].clash_info.name_a.split('/')[0]}}</span></span></div>
						<!-- :id="name_b.length>4?'overwidth1':''" v-if="matchType == 'double'&&user_id_b==serve_user" {{name_b}} -->
						<div class="name_b" :id="liveInfo[0].clash_info.name_a.split('/')[1].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==2&&liveInfo[0].clash_info.user_id_b==liveInfo[0].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[0].clash_info.name_a.split('/')[1]}}</span></span></div>
					</div>
					<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1 -->
					<div class="box num">{{liveInfo[0].round_num.length>2?liveInfo[0].round_num[0].top:''}} <span class="dotnum">{{liveInfo[0].round_num.length>2?liveInfo[0].round_num[0].tiebreak:''}}</span></div>
					<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2-->
					<div class="box num">{{liveInfo[0].round_num.length==2?liveInfo[0].round_num[0].top:liveInfo[0].round_num.length==3?liveInfo[0].round_num[1].top:''}}<span class="dotnum">{{liveInfo[0].round_num.length==2?liveInfo[0].round_num[0].tiebreak:liveInfo[0].round_num.length==2?liveInfo[0].round_num[1].tiebreak:''}}</span></div>
					<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3 }}-->
					<div class="box num">{{liveInfo[0].round_num.length==1?liveInfo[0].round_num[0].top:liveInfo[0].round_num.length==2?liveInfo[0].round_num[1].top:liveInfo[0].round_num.length==3?liveInfo[0].round_num[2].top:''}}<span class="dotnum">{{liveInfo[0].round_num.length==1?liveInfo[0].round_num[0].tiebreak:liveInfo[0].round_num.length==2?liveInfo[0].round_num[1].tiebreak:liveInfo[0].round_num.length==3?liveInfo[0].round_num[2].tiebreak:''}}</span></div>
					<!-- 第四列 固定不变-->
					<div class="box num score">{{liveInfo[0].score_num.split(':')[0]}}</div>
				</div>
				<div class="row2">
					<!-- 单打时下面运动员姓名 -->
					<div class="box name-single" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.name_b.length<=4">
						<span class="name_a"><span class="circle" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.user_id_b==liveInfo[0].clash_info.serve_user"></span>{{liveInfo[0].clash_info.name_b}}</span>
					</div>
					<!-- 单打名字超长处理 -->
					<div class="box name-single" id="overwidth" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.name_b.length>4">
						<div class="name_a">
							<span class="circle" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.user_id_b==liveInfo[0].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[0].clash_info.nameba}}</span></span>
						</div>
					</div>
					<!-- 双打时下面运动员姓名 -->
					<div class="box name-double" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==2">
						<div class="name_c" :id="liveInfo[0].clash_info.name_b.split('/')[0].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==1&&liveInfo[0].clash_info.user_id_b==liveInfo[0].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[0].clash_info.name_b.split('/')[0]}}</span></span></div>
						<div class="name_d" :id="liveInfo[0].clash_info.name_b.split('/')[1].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[0].clash_info.user_id_a.split(',').length==2&&liveInfo[0].clash_info.user_id_b==liveInfo[0].clash_info.serve_user"></span>
							<span class="name"><span class="scroll" >{{liveInfo[0].clash_info.name_b.split('/')[1]}}</span></span></div>
					</div>
					<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1-->
					<div class="box num">{{liveInfo[0].round_num.length>2?liveInfo[0].round_num[0].bot:''}}</div>
					<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2 -->
					<div class="box num">{{liveInfo[0].round_num.length==2?liveInfo[0].round_num[0].bot:liveInfo[0].round_num.length==3?liveInfo[0].round_num[1].bot:''}}</div>
					<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3 -->
					<div class="box num">{{liveInfo[0].round_num.length==1?liveInfo[0].round_num[0].bot:liveInfo[0].round_num.length==2?liveInfo[0].round_num[1].bot:liveInfo[0].round_num.length==3?liveInfo[0].round_num[2].bot:''}}</div>
					<!-- 第四列 固定不变 -->
					<div class="box num score">{{liveInfo[0].score_num.split(':')[1]}}</div>
				</div>
			</div>
		</div>
		<div class="container_two"  v-if="liveInfo[1]">
			<div class="container">
				<div class="title" v-if="liveInfo[1].com_name.length<=10">{{liveInfo[1].com_name}}</div>
				<marquee class="title" v-if="liveInfo[1].com_name.length>10">{{liveInfo[1].com_name}}</marquee>
				<div class="match_info">{{liveInfo[1].ground_name}} {{liveInfo[1].group_name}} <span v-if="liveInfo[1].stage!==null">第{{liveInfo[1].stage}}轮</span> <span v-if="liveInfo[1].com_system!==2&&liveInfo[1].com_system!==3"><span v-if="stage==1">第一阶段</span><span v-if="stage==2">第一阶段</span></span></div>
				<div class="logo1">
					<img :src="liveInfo[1].com_logo" alt="">
				</div>
				<div class="logo2" v-if="liveInfo[1].com_logo_two">
					<img :src="liveInfo[1].com_logo_two" alt="">
				</div>
				<div class="box1" v-if="liveInfo[1].clash_info.one_limit_a!==null&&liveInfo[1].clash_info.team_name_a==null&&liveInfo[1].clash_info.team_name_b==null">
					<div class="groupname1" v-if="liveInfo[1].clash_info.one_limit_a.length<=9">{{liveInfo[1].clash_info.one_limit_a}}</div>
					<div class="groupname3" v-if="liveInfo[1].clash_info.one_limit_a.length>9"><span class="scroll">{{liveInfo[1].clash_info.one_limit_a}}</span></div>
					<div class="groupname2" v-if="liveInfo[1].clash_info.one_limit_b.length<=9">{{liveInfo[1].clash_info.one_limit_b}}</div>
					<div class="groupname4" v-if="liveInfo[1].clash_info.one_limit_a.length>9"><span class="scroll">{{liveInfo[1].clash_info.one_limit_b}}</span></div>
				</div>
				<div class="box1" v-if="liveInfo[1].clash_info.team_name_a!==null&&liveInfo[1].clash_info.team_name_b!==null">
					<div class="groupname1" v-if="liveInfo[1].clash_info.team_name_a.length<9">{{liveInfo[1].clash_info.team_name_a}}</div>
					<div class="groupname3" v-if="liveInfo[1].clash_info.team_name_a.length>=9"><span class="scroll">{{liveInfo[1].clash_info.team_name_a}}</span></div>
					<div class="groupname2" v-if="liveInfo[1].clash_info.team_name_b.length<9">{{liveInfo[1].clash_info.team_name_b}}</div>
					<div class="groupname4" v-if="liveInfo[1].clash_info.team_name_b.length>=9"><span class="scroll">{{liveInfo[1].clash_info.team_name_b}}</span></div>
				</div>
				<div :class="liveInfo[1].status==0||liveInfo[1].status==1?'waiting':liveInfo[1].status==2?'status1':liveInfo[1].status==3?'over':liveInfo[1].status==4?'pause':''" >
					<div class="ing"></div><span></span>
					<span class="status_name" v-if="liveInfo[1].status==0||liveInfo[1].status==1">即将开始</span>
					<span class="status_name" v-if="liveInfo[1].status==2">进行中</span>
					<span class="status_name" v-if="liveInfo[1].status==3">已结束</span>
					<span class="status_name" v-if="liveInfo[1].status==4">比赛暂停</span>
				</div>
				<div class="time">
					<div ><img src="http://qncdn.tissys.com/admin/assets/image/time.png" alt=""><span>{{liveInfo[1].game_time.split(':')[0]}}:{{liveInfo[1].game_time.split(':')[1]}}</span></div>
				</div>
				<div class="row1">
					<!-- 单打时上面运动员姓名 -->
					<div class="box name-single" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.name_a.length<=4">
						<span class="name_a"><span class="circle" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.user_id_a==liveInfo[1].clash_info.serve_user"></span>{{liveInfo[1].clash_info.name_a}}</span>
					</div>
					<!-- 单打名字超长处理 -->
					<div class="box name-single" id="overwidth" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.name_a.length>4">
						<div class="name_a">
							<span class="circle" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.user_id_a==liveInfo[1].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[1].clash_info.name_a}}</span></span>
						</div>
					</div>
					<!-- 双打时上面运动员姓名 v-if="matchType=='double'"-->
					<div class="box name-double" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==2">
						<!--  v-if="matchType == 'double'&&user_id_a==serve_user" {{name_a}} -->
						<div class="name_a" :id="liveInfo[1].clash_info.name_a.split('/')[0].length>=4?'overwidth1':''">
						<span class="circle" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==2&&liveInfo[1].clash_info.user_id_b==liveInfo[1].clash_info.serve_user"></span>
						<span class="name"><span class="scroll" >{{liveInfo[1].clash_info.name_a.split('/')[0]}}</span></span></div>
						<!-- :id="name_b.length>4?'overwidth1':''" v-if="matchType == 'double'&&user_id_b==serve_user" {{name_b}} -->
						<div class="name_b" :id="liveInfo[1].clash_info.name_a.split('/')[1].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==2&&liveInfo[1].clash_info.user_id_b==liveInfo[1].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[1].clash_info.name_a.split('/')[1]}}</span></span></div>
					</div>
					<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1 -->
					<div class="box num">{{liveInfo[1].round_num.length>2?liveInfo[1].round_num[0].top:''}} <span class="dotnum">{{liveInfo[1].round_num.length>2?liveInfo[1].round_num[0].tiebreak:''}}</span></div>
					<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2-->
					<div class="box num">{{liveInfo[1].round_num.length==2?liveInfo[1].round_num[0].top:liveInfo[1].round_num.length==3?liveInfo[1].round_num[1].top:''}}<span class="dotnum">{{liveInfo[1].round_num.length==2?liveInfo[1].round_num[0].tiebreak:liveInfo[1].round_num.length==2?liveInfo[1].round_num[1].tiebreak:''}}</span></div>
					<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3 }}-->
					<div class="box num">{{liveInfo[1].round_num.length==1?liveInfo[1].round_num[0].top:liveInfo[1].round_num.length==2?liveInfo[1].round_num[1].top:liveInfo[1].round_num.length==3?liveInfo[1].round_num[2].top:''}}<span class="dotnum">{{liveInfo[1].round_num.length==1?liveInfo[1].round_num[0].tiebreak:liveInfo[1].round_num.length==2?liveInfo[1].round_num[1].tiebreak:liveInfo[1].round_num.length==3?liveInfo[1].round_num[2].tiebreak:''}}</span></div>
					<!-- 第四列 固定不变-->
					<div class="box num score">{{liveInfo[1].score_num.split(':')[0]}}</div>
				</div>
				<div class="row2">
					<!-- 单打时下面运动员姓名 -->
					<div class="box name-single" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.name_b.length<=4">
						<span class="name_a"><span class="circle" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.user_id_b==liveInfo[1].clash_info.serve_user"></span>{{liveInfo[1].clash_info.name_b}}</span>
					</div>
					<!-- 单打名字超长处理 -->
					<div class="box name-single" id="overwidth" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.name_b.length>4">
						<div class="name_a">
							<span class="circle" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.user_id_b==liveInfo[1].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[1].clash_info.nameba}}</span></span>
						</div>
					</div>
					<!-- 双打时下面运动员姓名 -->
					<div class="box name-double" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==2">
						<div class="name_c" :id="liveInfo[1].clash_info.name_b.split('/')[0].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==1&&liveInfo[1].clash_info.user_id_b==liveInfo[1].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[1].clash_info.name_b.split('/')[0]}}</span></span></div>
						<div class="name_d" :id="liveInfo[1].clash_info.name_b.split('/')[1].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[1].clash_info.user_id_a.split(',').length==2&&liveInfo[1].clash_info.user_id_b==liveInfo[1].clash_info.serve_user"></span>
							<span class="name"><span class="scroll" >{{liveInfo[1].clash_info.name_b.split('/')[1]}}</span></span></div>
					</div>
					<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1-->
					<div class="box num">{{liveInfo[1].round_num.length>2?liveInfo[1].round_num[0].bot:''}}</div>
					<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2 -->
					<div class="box num">{{liveInfo[1].round_num.length==2?liveInfo[1].round_num[0].bot:liveInfo[1].round_num.length==3?liveInfo[1].round_num[1].bot:''}}</div>
					<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3 -->
					<div class="box num">{{liveInfo[1].round_num.length==1?liveInfo[1].round_num[0].bot:liveInfo[1].round_num.length==2?liveInfo[1].round_num[1].bot:liveInfo[1].round_num.length==3?liveInfo[1].round_num[2].bot:''}}</div>
					<!-- 第四列 固定不变 -->
					<div class="box num score">{{liveInfo[1].score_num.split(':')[1]}}</div>
				</div>
			</div>
		</div>
		<div class="container_three" v-if="liveInfo[2]">
			<div class="container">
				<div class="title" v-if="liveInfo[2].com_name.length<=10">{{liveInfo[2].com_name}}</div>
				<marquee class="title" v-if="liveInfo[2].com_name.length>10">{{liveInfo[2].com_name}}</marquee>
				<div class="match_info">{{liveInfo[2].ground_name}} {{liveInfo[2].group_name}} <span v-if="liveInfo[2].stage!==null">第{{liveInfo[2].stage}}轮</span> <span v-if="liveInfo[2].com_system!==2&&liveInfo[2].com_system!==3"><span v-if="stage==1">第一阶段</span><span v-if="stage==2">第一阶段</span></span></div>
				<div class="logo1">
					<img :src="liveInfo[2].com_logo" alt="">
				</div>
				<div class="logo2" v-if="liveInfo[2].com_logo_two">
					<img :src="liveInfo[2].com_logo_two" alt="">
				</div>
				<div class="box1" v-if="liveInfo[2].clash_info.one_limit_a!==null&&liveInfo[2].clash_info.team_name_a==null&&liveInfo[2].clash_info.team_name_b==null">
					<div class="groupname1" v-if="liveInfo[2].clash_info.one_limit_a.length<=9">{{liveInfo[2].clash_info.one_limit_a}}</div>
					<div class="groupname3" v-if="liveInfo[2].clash_info.one_limit_a.length>9"><span class="scroll">{{liveInfo[2].clash_info.one_limit_a}}</span></div>
					<div class="groupname2" v-if="liveInfo[2].clash_info.one_limit_b.length<=9">{{liveInfo[2].clash_info.one_limit_b}}</div>
					<div class="groupname4" v-if="liveInfo[2].clash_info.one_limit_a.length>9"><span class="scroll">{{liveInfo[2].clash_info.one_limit_b}}</span></div>
				</div>
				<div class="box1" v-if="liveInfo[2].clash_info.team_name_a!==null&&liveInfo[2].clash_info.team_name_b!==null">
					<div class="groupname1" v-if="liveInfo[2].clash_info.team_name_a.length<9">{{liveInfo[2].clash_info.team_name_a}}</div>
					<div class="groupname3" v-if="liveInfo[2].clash_info.team_name_a.length>=9"><span class="scroll">{{liveInfo[2].clash_info.team_name_a}}</span></div>
					<div class="groupname2" v-if="liveInfo[2].clash_info.team_name_b.length<9">{{liveInfo[2].clash_info.team_name_b}}</div>
					<div class="groupname4" v-if="liveInfo[2].clash_info.team_name_b.length>=9"><span class="scroll">{{liveInfo[2].clash_info.team_name_b}}</span></div>
				</div>
				<div :class="liveInfo[2].status==0||liveInfo[2].status==1?'waiting':liveInfo[2].status==2?'status1':liveInfo[2].status==3?'over':liveInfo[2].status==4?'pause':''" >
					<div class="ing"></div><span></span>
					<span class="status_name" v-if="liveInfo[2].status==0||liveInfo[2].status==1">即将开始</span>
					<span class="status_name" v-if="liveInfo[2].status==2">进行中</span>
					<span class="status_name" v-if="liveInfo[2].status==3">已结束</span>
					<span class="status_name" v-if="liveInfo[2].status==4">比赛暂停</span>
				</div>
				<div class="time">
					<div ><img src="http://qncdn.tissys.com/admin/assets/image/time.png" alt=""><span>{{liveInfo[2].game_time.split(':')[0]}}:{{liveInfo[2].game_time.split(':')[1]}}</span></div>
				</div>
				<div class="row1">
					<!-- 单打时上面运动员姓名 -->
					<div class="box name-single" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.name_a.length<=4">
						<span class="name_a"><span class="circle" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.user_id_a==liveInfo[2].clash_info.serve_user"></span>{{liveInfo[2].clash_info.name_a}}</span>
					</div>
					<!-- 单打名字超长处理 -->
					<div class="box name-single" id="overwidth" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.name_a.length>4">
						<div class="name_a">
							<span class="circle" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.user_id_a==liveInfo[2].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[2].clash_info.name_a}}</span></span>
						</div>
					</div>
					<!-- 双打时上面运动员姓名 v-if="matchType=='double'"-->
					<div class="box name-double" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==2">
						<!--  v-if="matchType == 'double'&&user_id_a==serve_user" {{name_a}} -->
						<div class="name_a" :id="liveInfo[2].clash_info.name_a.split('/')[0].length>=4?'overwidth1':''">
						<span class="circle" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==2&&liveInfo[2].clash_info.user_id_b==liveInfo[2].clash_info.serve_user"></span>
						<span class="name"><span class="scroll" >{{liveInfo[2].clash_info.name_a.split('/')[0]}}</span></span></div>
						<!-- :id="name_b.length>4?'overwidth1':''" v-if="matchType == 'double'&&user_id_b==serve_user" {{name_b}} -->
						<div class="name_b" :id="liveInfo[2].clash_info.name_a.split('/')[1].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==2&&liveInfo[2].clash_info.user_id_b==liveInfo[2].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[2].clash_info.name_a.split('/')[1]}}</span></span></div>
					</div>
					<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1 -->
					<div class="box num">{{liveInfo[2].round_num.length>2?liveInfo[2].round_num[0].top:''}} <span class="dotnum">{{liveInfo[2].round_num.length>2?liveInfo[2].round_num[0].tiebreak:''}}</span></div>
					<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2-->
					<div class="box num">{{liveInfo[2].round_num.length==2?liveInfo[2].round_num[0].top:liveInfo[2].round_num.length==3?liveInfo[2].round_num[1].top:''}}<span class="dotnum">{{liveInfo[2].round_num.length==2?liveInfo[2].round_num[0].tiebreak:liveInfo[2].round_num.length==2?liveInfo[2].round_num[1].tiebreak:''}}</span></div>
					<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3 }}-->
					<div class="box num">{{liveInfo[2].round_num.length==1?liveInfo[2].round_num[0].top:liveInfo[2].round_num.length==2?liveInfo[2].round_num[1].top:liveInfo[2].round_num.length==3?liveInfo[2].round_num[2].top:''}}<span class="dotnum">{{liveInfo[2].round_num.length==1?liveInfo[2].round_num[0].tiebreak:liveInfo[2].round_num.length==2?liveInfo[2].round_num[1].tiebreak:liveInfo[2].round_num.length==3?liveInfo[2].round_num[2].tiebreak:''}}</span></div>
					<!-- 第四列 固定不变-->
					<div class="box num score">{{liveInfo[2].score_num.split(':')[0]}}</div>
				</div>
				<div class="row2">
					<!-- 单打时下面运动员姓名 -->
					<div class="box name-single" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.name_b.length<=4">
						<span class="name_a"><span class="circle" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.user_id_b==liveInfo[2].clash_info.serve_user"></span>{{liveInfo[2].clash_info.name_b}}</span>
					</div>
					<!-- 单打名字超长处理 -->
					<div class="box name-single" id="overwidth" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.name_b.length>4">
						<div class="name_a">
							<span class="circle" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.user_id_b==liveInfo[2].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[2].clash_info.nameba}}</span></span>
						</div>
					</div>
					<!-- 双打时下面运动员姓名 -->
					<div class="box name-double" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==2">
						<div class="name_c" :id="liveInfo[2].clash_info.name_b.split('/')[0].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==1&&liveInfo[2].clash_info.user_id_b==liveInfo[2].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[2].clash_info.name_b.split('/')[0]}}</span></span></div>
						<div class="name_d" :id="liveInfo[2].clash_info.name_b.split('/')[1].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[2].clash_info.user_id_a.split(',').length==2&&liveInfo[2].clash_info.user_id_b==liveInfo[2].clash_info.serve_user"></span>
							<span class="name"><span class="scroll" >{{liveInfo[2].clash_info.name_b.split('/')[1]}}</span></span></div>
					</div>
					<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1-->
					<div class="box num">{{liveInfo[2].round_num.length>2?liveInfo[2].round_num[0].bot:''}}</div>
					<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2 -->
					<div class="box num">{{liveInfo[2].round_num.length==2?liveInfo[2].round_num[0].bot:liveInfo[2].round_num.length==3?liveInfo[2].round_num[1].bot:''}}</div>
					<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3 -->
					<div class="box num">{{liveInfo[2].round_num.length==1?liveInfo[2].round_num[0].bot:liveInfo[2].round_num.length==2?liveInfo[2].round_num[1].bot:liveInfo[2].round_num.length==3?liveInfo[2].round_num[2].bot:''}}</div>
					<!-- 第四列 固定不变 -->
					<div class="box num score">{{liveInfo[2].score_num.split(':')[1]}}</div>
				</div>
			</div>
		</div>
		<div class="container_four" v-if="liveInfo[3]">
			<div class="container">
				<div class="title" v-if="liveInfo[3].com_name.length<=10">{{liveInfo[3].com_name}}</div>
				<marquee class="title" v-if="liveInfo[3].com_name.length>10">{{liveInfo[3].com_name}}</marquee>
				<div class="match_info">{{liveInfo[3].ground_name}} {{liveInfo[3].group_name}} <span v-if="liveInfo[3].stage!==null">第{{liveInfo[3].stage}}轮</span> <span v-if="liveInfo[3].com_system!==2&&liveInfo[3].com_system!==3"><span v-if="stage==1">第一阶段</span><span v-if="stage==2">第一阶段</span></span></div>
				<div class="logo1">
					<img :src="liveInfo[3].com_logo" alt="">
				</div>
				<div class="logo2" v-if="liveInfo[3].com_logo_two">
					<img :src="liveInfo[3].com_logo_two" alt="">
				</div>
				<div class="box1" v-if="liveInfo[3].clash_info.one_limit_a!==null&&liveInfo[3].clash_info.team_name_a==null&&liveInfo[3].clash_info.team_name_b==null">
					<div class="groupname1" v-if="liveInfo[3].clash_info.one_limit_a.length<=9">{{liveInfo[3].clash_info.one_limit_a}}</div>
					<div class="groupname3" v-if="liveInfo[3].clash_info.one_limit_a.length>9"><span class="scroll">{{liveInfo[3].clash_info.one_limit_a}}</span></div>
					<div class="groupname2" v-if="liveInfo[3].clash_info.one_limit_b.length<=9">{{liveInfo[3].clash_info.one_limit_b}}</div>
					<div class="groupname4" v-if="liveInfo[3].clash_info.one_limit_a.length>9"><span class="scroll">{{liveInfo[3].clash_info.one_limit_b}}</span></div>
				</div>
				<div class="box1" v-if="liveInfo[3].clash_info.team_name_a!==null&&liveInfo[3].clash_info.team_name_b!==null">
					<div class="groupname1" v-if="liveInfo[3].clash_info.team_name_a.length<9">{{liveInfo[3].clash_info.team_name_a}}</div>
					<div class="groupname3" v-if="liveInfo[3].clash_info.team_name_a.length>=9"><span class="scroll">{{liveInfo[3].clash_info.team_name_a}}</span></div>
					<div class="groupname2" v-if="liveInfo[3].clash_info.team_name_b.length<9">{{liveInfo[3].clash_info.team_name_b}}</div>
					<div class="groupname4" v-if="liveInfo[3].clash_info.team_name_b.length>=9"><span class="scroll">{{liveInfo[3].clash_info.team_name_b}}</span></div>
				</div>
				<div :class="liveInfo[3].status==0||liveInfo[3].status==1?'waiting':liveInfo[3].status==2?'status1':liveInfo[3].status==3?'over':liveInfo[3].status==4?'pause':''" >
					<div class="ing"></div><span></span>
					<span class="status_name" v-if="liveInfo[3].status==0||liveInfo[3].status==1">即将开始</span>
					<span class="status_name" v-if="liveInfo[3].status==2">进行中</span>
					<span class="status_name" v-if="liveInfo[3].status==3">已结束</span>
					<span class="status_name" v-if="liveInfo[3].status==4">比赛暂停</span>
				</div>
				<div class="time">
					<div ><img src="http://qncdn.tissys.com/admin/assets/image/time.png" alt=""><span>{{liveInfo[3].game_time.split(':')[0]}}:{{liveInfo[3].game_time.split(':')[1]}}</span></div>
				</div>
				<div class="row1">
					<!-- 单打时上面运动员姓名 -->
					<div class="box name-single" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.name_a.length<=4">
						<span class="name_a"><span class="circle" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.user_id_a==liveInfo[3].clash_info.serve_user"></span>{{liveInfo[3].clash_info.name_a}}</span>
					</div>
					<!-- 单打名字超长处理 -->
					<div class="box name-single" id="overwidth" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.name_a.length>4">
						<div class="name_a">
							<span class="circle" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.user_id_a==liveInfo[3].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[3].clash_info.name_a}}</span></span>
						</div>
					</div>
					<!-- 双打时上面运动员姓名 v-if="matchType=='double'"-->
					<div class="box name-double" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==2">
						<!--  v-if="matchType == 'double'&&user_id_a==serve_user" {{name_a}} -->
						<div class="name_a" :id="liveInfo[3].clash_info.name_a.split('/')[0].length>=4?'overwidth1':''">
						<span class="circle" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==2&&liveInfo[3].clash_info.user_id_b==liveInfo[3].clash_info.serve_user"></span>
						<span class="name"><span class="scroll" >{{liveInfo[3].clash_info.name_a.split('/')[0]}}</span></span></div>
						<!-- :id="name_b.length>4?'overwidth1':''" v-if="matchType == 'double'&&user_id_b==serve_user" {{name_b}} -->
						<div class="name_b" :id="liveInfo[3].clash_info.name_a.split('/')[1].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==2&&liveInfo[3].clash_info.user_id_b==liveInfo[3].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[3].clash_info.name_a.split('/')[1]}}</span></span></div>
					</div>
					<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1 -->
					<div class="box num">{{liveInfo[3].round_num.length>2?liveInfo[3].round_num[0].top:''}} <span class="dotnum">{{liveInfo[3].round_num.length>2?liveInfo[3].round_num[0].tiebreak:''}}</span></div>
					<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2-->
					<div class="box num">{{liveInfo[3].round_num.length==2?liveInfo[3].round_num[0].top:liveInfo[3].round_num.length==3?liveInfo[3].round_num[1].top:''}}<span class="dotnum">{{liveInfo[3].round_num.length==2?liveInfo[3].round_num[0].tiebreak:liveInfo[3].round_num.length==2?liveInfo[3].round_num[1].tiebreak:''}}</span></div>
					<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3 }}-->
					<div class="box num">{{liveInfo[3].round_num.length==1?liveInfo[3].round_num[0].top:liveInfo[3].round_num.length==2?liveInfo[3].round_num[1].top:liveInfo[3].round_num.length==3?liveInfo[3].round_num[2].top:''}}<span class="dotnum">{{liveInfo[3].round_num.length==1?liveInfo[3].round_num[0].tiebreak:liveInfo[3].round_num.length==2?liveInfo[3].round_num[1].tiebreak:liveInfo[3].round_num.length==3?liveInfo[3].round_num[2].tiebreak:''}}</span></div>
					<!-- 第四列 固定不变-->
					<div class="box num score">{{liveInfo[3].score_num.split(':')[0]}}</div>
				</div>
				<div class="row2">
					<!-- 单打时下面运动员姓名 -->
					<div class="box name-single" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.name_b.length<=4">
						<span class="name_a"><span class="circle" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.user_id_b==liveInfo[3].clash_info.serve_user"></span>{{liveInfo[3].clash_info.name_b}}</span>
					</div>
					<!-- 单打名字超长处理 -->
					<div class="box name-single" id="overwidth" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.name_b.length>4">
						<div class="name_a">
							<span class="circle" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.user_id_b==liveInfo[3].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[3].clash_info.nameba}}</span></span>
						</div>
					</div>
					<!-- 双打时下面运动员姓名 -->
					<div class="box name-double" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==2">
						<div class="name_c" :id="liveInfo[3].clash_info.name_b.split('/')[0].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==1&&liveInfo[3].clash_info.user_id_b==liveInfo[3].clash_info.serve_user"></span>
							<span class="name"><span class="scroll">{{liveInfo[3].clash_info.name_b.split('/')[0]}}</span></span></div>
						<div class="name_d" :id="liveInfo[3].clash_info.name_b.split('/')[1].length>=4?'overwidth1':''">
							<span class="circle" v-if="liveInfo[3].clash_info.user_id_a.split(',').length==2&&liveInfo[3].clash_info.user_id_b==liveInfo[3].clash_info.serve_user"></span>
							<span class="name"><span class="scroll" >{{liveInfo[3].clash_info.name_b.split('/')[1]}}</span></span></div>
					</div>
					<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1-->
					<div class="box num">{{liveInfo[3].round_num.length>2?liveInfo[3].round_num[0].bot:''}}</div>
					<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2 -->
					<div class="box num">{{liveInfo[3].round_num.length==2?liveInfo[3].round_num[0].bot:liveInfo[3].round_num.length==3?liveInfo[3].round_num[1].bot:''}}</div>
					<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3 -->
					<div class="box num">{{liveInfo[3].round_num.length==1?liveInfo[3].round_num[0].bot:liveInfo[3].round_num.length==2?liveInfo[3].round_num[1].bot:liveInfo[3].round_num.length==3?liveInfo[3].round_num[2].bot:''}}</div>
					<!-- 第四列 固定不变 -->
					<div class="box num score">{{liveInfo[3].score_num.split(':')[1]}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	      liveInfo: [],
	      show: false,
	      page: '',
	      name_a: '',
	      name_b: '',
	      logoSrc: "",
	      matchName: "",
	    }
	  },
	  created() {
	    this.led_info()
	  },
	  filters: {
	    teams(site) {
	      return site.split(',')[0]
	    },
	    wheelName: (battle) => {
	      if ((battle.com_system == 1 && battle.stage == 2) || battle.com_system == 3) {
	        let maxWheel = battle.wheel_number
	        let wheel = battle.wheel
	        let wheelName = ''
	        if (wheel == maxWheel) wheelName = '决赛'
	        if (wheel == (parseInt(maxWheel) - 1)) wheelName = '半决赛'
	        if (wheel == (parseInt(maxWheel) - 2)) wheelName = '1/4决赛'
	        if (wheel < (parseInt(maxWheel) - 2)) wheelName = `第${battle.wheel}轮`
	        return wheelName
	
	      } else {
	        return `第${battle.wheel}轮`
	      }
	    },
	    matchStatus(status) {
	      if (status == 0) {
	        return "即将开始";
	      } else if (status == 1) {
	        return "热身";
	      } else if (status == 2) {
	        return "进行中";
	      } else if (status == 3) {
	        return "已结束";
	      } else if (status == 4) {
	        return "比赛暂停";
	      }
	    },
	    matchStage(com_system, stage) {
	      if (com_system == 1 || com_system == 4) { //1和4才有阶段
	        if (stage == 1) {
	          return "第一阶段";
	        } else if (stage == 2) {
	          return "第二阶段";
	        }
	      } else if (com_system == 5) {
	        return "第" + stage + "区";
	      }
	    },
	    matchWheel(wheel, maxWheel, com_system, stage, isno, field) {
	      if ((com_system == 1 && stage == 2) || com_system == 3 || com_system == 5) {
	        const distance = maxWheel - wheel;
	        // 没有淘汰附加赛
	        if (isno == 0) {
	          // 最后一轮
	          if (distance == 0) {
	            return "决赛";
	          }
	          // 倒数第二轮
	          else if (distance == 1) {
	            return "半决赛";
	          } else if (distance == 2) {
	            return "1/4决赛";
	          } else {
	            return "第" + wheel + "轮";
	          }
	        } else {
	          // 最后一轮
	          if (distance == 0) {
	            switch (field) {
	              case 1:
	                return "决赛";
	                break;
	              case 2:
	                return "5-6附加赛";
	                break;
	              case 3:
	                return '3-4附加赛';
	                break;
	              case 4:
	                return "7-8附加赛";
	                break;
	            }
	
	          }
	          // 倒数第二轮
	          else if (distance == 1) {
	            switch (field) {
	              case 1:
	                return "半决赛";
	                break;
	              case 2:
	                return "半决赛";
	                break;
	              case 3:
	                return '5-8附加赛';
	                break;
	              case 4:
	                return "5-8附加赛";
	                break;
	            }
	          } else if (distance == 2) {
	            return "1/4决赛";
	          } else {
	            return "第" + wheel + "轮";
	          }
	        }
	      } else {
	        return "第" + wheel + "轮";
	      }
	    },
	  },
	  methods: {
	    led_info() {
	      this.$axios.post('/LedShow/led_more_info', {
	        com_id: this.$route.query.com_id,
	        time: this.$route.query.time,
	      }, {
	        headers: {
	          token: window.sessionStorage.getItem('token')
	        }
	      }).then(res => {
	        if (res.data.code == 2000) {
	          this.liveInfo = res.data.data;
	          if (res.data.data.length == 1) {
	            this.name_a = res.data.data[0].clash_info.name_a
	            this.name_b = res.data.data[0].clash_info.name_b
	          }
						console.log(this.liveInfo)
	          // this.page = res.data.data.length > 4 ? 2 : 1
	          if (res.data.data.length <= 4) {
	            this.page = 1
	          } else {
	            this.page = Math.ceil(res.data.data.length / 4)
	          }
	          this.show = true
	          this.matchName = this.liveInfo[0].com_name;
	          this.logoSrc = this.liveInfo[0].com_logo;
	        } else {
	          this.show = false
	        }
	        setTimeout(() => {
	          this.led_info()
	        }, 3000)
	      }).catch(res => {
	        this.led_info()
	      })
	    }
	  }
	}
</script>

<style scoped lang="less">
	.root{
		position: relative;
		min-height: 100vh;
		// display: flex;
		// justify-content: space-around;
		// align-items: center;
		// flex-wrap: wrap;
		@keyframes wordsLoop {
		    0% {
		        transform: translateX(100%);
		        -webkit-transform: translateX(100%);
		    }
		    100% {
		        transform: translateX(-130%);
		        -webkit-transform: translateX(-130%);
		    }
		}
		 
		@keyframes namesLoop {
		    0% {
		        transform: translateX(0px);
		        -webkit-transform: translateX(0px);
		    }
		    100% {
		        transform: translateX(-200%);
		        -webkit-transform: translateX(-200%);
		    }
		}
		.backimg{
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.container_one,.container_two,.container_three,.container_four{
			width: 540px;
			height: 480px;
			box-sizing: border-box;
			.container{
				width: 100%;
				height: 100%;
				border: 1px solid #00A0E9;
				margin: 5px;
				background: url(http://qncdn.tissys.com/img/bj2020100702.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				position: relative;
				.logo1,.logo2{
					width: 50px;
					height: 50px;
					background: #fff;
					position: absolute;
					top: 55px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.logo1{
					left: 0;
				}
				.logo2{
					right:0;
				}
				.title{
					width: 100%;
					height: 50px;
					line-height: 50px;
					text-align: center;
					font-size: 45px;
					color: #fff;
				}
				.match_info{
					width: 100%;
					text-align: center;
					font-size: 28px;
					margin-top: 10px;
					color: #65b17b;
				}
				.groupname1,.groupname2,.groupname3,.groupname4{
					width: 290px;
					height: 50px;
					font-size: 32px;
					line-height: 50px;
					font-weight: 700;
					color: #fda800;
					white-space: nowrap;
					position: absolute;
					left: 0;
					text-align: left;
					box-sizing: border-box;
					padding-left: 45px;
					overflow: hidden!important;
				}
				.groupname1{
					top: 125px;
				}
				.groupname2{
					bottom: 25px;
				}
				.groupname3{
					top: 125px;
					.scroll{
						width: 290px;
						height: 50px;
						line-height: 55px;
						position: absolute;
						text-align: center;
						animation: 18s wordsLoop linear infinite normal;
					}
				}
				.groupname4{
					bottom: 30px;
					.scroll{
						width: 290px;
						height: 50px;
						line-height: 55px;
						position: absolute;
						text-align: center;
						animation: 20s wordsLoop linear infinite normal;
					}
				}
				.row1,.row2{
					width: 100%;
					height: 110px;
					position: absolute;
					left: 0;
					display: flex;
					justify-content: space-around;
					.box{
						width: 120px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.score{
						color: #fda800!important;
					}
					.num{
						font-size:80px;
						font-weight: 700;
						color: #f8fd53;
						position: relative;
						.dotnum{
							position: absolute;
							top: -5px;
							right: 0;
							font-size: 60px;
							font-weight: 700;
							color: #f8fd53;
						}
					}
					.name-single,.name-double{
						width: 230px;
						font-weight: 700;
						height: 110px;
						color: #fff;
					}
					.name-single{
						.name_a,.name_b{
							display: block;
							width: 100%;
							height: 50%;
							font-size: 28px;
							text-align: left;
							padding-left: 45px;
							box-sizing: border-box;
							position: relative;
							line-height: 50px;
							.circle{
								display: inline-block;
								width: 30px;
								height: 30px;
								border-radius: 30px;
								background: #fda800;
								position: absolute;
								bottom: 0;
								transform: translateY(-50%);
								left: 10px;
							}
						}
					}
					.name-double{
						display: flex;
						flex-direction: column;
						.name_a,.name_b,.name_c,.name_d{
							display: block;
							width: 100%;
							height: 50%;
							font-size: 28px;
							text-align: left;
							padding-left: 45px;
							box-sizing: border-box;
							position: relative;
							line-height: 50px;
							.name{
								white-space: nowrap;
							}
							.circle{
								display: inline-block;
								width: 30px;
								height: 30px;
								border-radius: 30px;
								background: #fda800;
								position: absolute;
								bottom:5px;
								transform: translateY(-50%);
								left: 0;
							}
						}
					}
					
				}
				.row1{
					top:180px;
				}
				.row2{
					bottom: 80px;
				}
				.status1,.waiting,.over,.pause{
					position: absolute;
					top: 130px;
					right: 100px;
					.status_name{
						font-size: 18px;
					}
					.ing,span{
						display: inline-block;
						vertical-align: middle;
					}
					.ing{
						margin-right: 10px;
						width: 18px;
						height: 18px;
						background-color: #f8fd53;
					}
					span{
						color: #f8fd53;
					}
				}
				// 即将开始
				.waiting{
					.ing{
						background-color: #fda800;
					}
					span{
						color:#fda800;
					}
				}
				// over 已结束
				.over{
					.ing{
						background-color: #f40;
					}
					span{
						color: #f40!important;
					}
				}
				// 暂停中
				.pause{
					.ing{
						background-color: #fda800;
					}
					span{
						color:#fda800;
					}
				}
				.time{
					position: absolute;
					top: 130px;
					right: 5px;
					font-size: 18px;
					color: #fff;
					img,span{
						display: inline-block;
						vertical-align: middle;
					}
					img{
						width:18px;
						margin-right: 10px;
					}
				}
				#overwidth1,#overwidth{
					text-align: right;
					position: relative;
					.name{
						width: 250px;
						height: 100%;
						overflow: hidden!important;
						position: absolute;
						right: 30px;
						bottom: 0;
						.clear{
							width: 285;
							height: 80px;
							display: block;
							background: transparent;
						}
						span{
							width: 100%;
							height: 80px;
							position: absolute;
							text-align: center;
							animation: 8s namesLoop linear infinite normal;
						}
					}
				}
			}
		}
		.container_one{
			position: absolute;
			top: 0;
			left: 24%;
		}
		.container_two{
			position: absolute;
			top: 0;
			right: 24%;
		}
		.container_three{
			position: absolute;
			top: 510px;
			left: 24%;
		}
		.container_four{
			position: absolute;
			top: 510px;
			right: 24%;
		}
		
	}
</style>
